<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    :show-close="true"
    :title="t('login.loginTitle')"
    :before-close="handleClose"
    width="380px"
    class="relogin"
    top="100px"
  >
    <div class="flex flex-col">
      <div class="flex flex-col">
        <span class="mb-2">{{ t("login.loginName") }}:</span>
        <el-input size="large" v-model="loginForm.loginName" clearable>
          <template #prefix>
            <el-icon class="el-input__icon">
              <user />
            </el-icon>
          </template>
        </el-input>

        <span class="mb-2 mt-4">{{ t("login.password") }}:</span>
        <el-input size="large" v-model="loginForm.password" clearable type="password" show-password autocomplete="new-password">
          <template #prefix>
            <el-icon class="el-input__icon">
              <lock />
            </el-icon>
          </template>
        </el-input>
      </div>
      <div class="flex justify-end items-center h-20 pl8">
        <el-button size="large" class="w-20" type="primary" :loading="loading" round @click="submit">{{
          t("login.submittext")
        }}</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, nextTick } from "vue";
import { Login } from "@/api/types/base";
import { loginApi } from "@/api/modules/login";
import { User, Lock } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/modules/user";
import { encrypt } from "@/api/services/encrypt";
import { ElButton, ElDialog, ElInput, ElIcon } from "element-plus";
import { getTimeState } from "@/utils";
import { ElNotification } from "element-plus";
import { useI18n } from "@/languages/useI18n";
import { BusinessType, BusinessOptType } from "@/enums/sysEnum";
import { useUserAction } from "@/hooks/useUserAction";
import { useDataStore } from "@/stores/modules/data";

const defaultAccount = JSON.parse(import.meta.env.VITE_DEFAULT_ACCOUNT);
const dataStore = useDataStore();
const { addUserAction } = useUserAction(BusinessType.LOGIN);
const { t } = useI18n();

const userStore = useUserStore();

const loginForm = reactive<Login.ReqLoginForm>({
  loginName: defaultAccount.loginName,
  password: defaultAccount.password
});
const props = defineProps({
  show: {
    type: Boolean,
    required: true,
    default: true
  },
  close: {
    type: Function,
    required: true
  }
});

const loading = ref(false);
const visible = ref(false);
visible.value = props.show;

const submit = async () => {
  loading.value = true;
  try {
    loginApi({ ...loginForm, password: encrypt(loginForm.password, loginForm.loginName) })
      .then(async res => {
        userStore.setToken(res.data.token);
        userStore.setUserInfo(res.data);
        dataStore.userId = res.data.token;
        loading.value = false;
        nextTick(() => {
          props.close();
          ElNotification({
            title: getTimeState(),
            message: `${t("login.loginSuccess")}`,
            type: "success",
            duration: 3000
          });
        });

        // 操作记录
        addUserAction(res.data.loginName, BusinessOptType.LOGIN, "因过期重新登录成功");
      })
      .catch(err => {
        ElNotification({
          title: "登录提示",
          message: err.message,
          type: "error",
          duration: 3000
        });
        loading.value = false;
      });
  } catch (error) {
    loading.value = false;
  }
};

const handleClose = (done: () => void) => {
  done();
  props.close();
};
</script>
<style lang="scss" scope>
.el-dialog__body {
  padding: 20px 20px 0 !important;
}
</style>
